<template>
  <div class="top">
    <el-select v-model="filterCondition.state" placeholder="文章状态" size="small" clearable>
      <el-option
          v-for="item in states"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="filterCondition.tag" placeholder="文章标签" size="small" clearable>
      <el-option
          v-for="item in tags"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-date-picker
        v-model="filterCondition.time"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions">
    </el-date-picker>
    <el-input v-model="filterCondition.key" placeholder="请输入关键字"></el-input>
    <el-button @click="search" icon="el-icon-search" size="small" plain>搜索
    </el-button>
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'

export default {
  name: "ArticleSelector",  //文章筛选器
  props: ['id', 'filterCondition'],
  data() {
    return {
      states: [
        {
          value: '0',
          label: '未发布'
        },
        {
          value: '1',
          label: '已发布'
        }
      ],  // 状态选择器
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }],
      },
      tags: [
        {
          value: '0',
          label: 'python'
        },
        {
          value: '1',
          label: 'django'
        }
      ],  // 标签选择器
    }
  },
  methods: {
    ...mapActions('ArticleList', ['getArticleSearch']),
    // 搜索
    search() {
      let condition_obj = {
        state: this.filterCondition.state,
        key: this.filterCondition.key,
        tag: this.filterCondition.tag,
        start_time: this.filterCondition.time[0] || '',
        end_time: this.filterCondition.time[1] || '',
        articlesType: this.id,
        usernid: this.$store.state.userinfo.nid,
        pag: this.pag,
      }
      this.getArticleSearch(condition_obj)
    },
  },
  computed: {
    ...mapState('ArticleList', ['SearchArticle'])
  }
}
</script>

<style lang="less">
.top {
  margin-bottom: 10px;
  display: flex;
  align-items: center;

  .el-select:nth-child(1) {
    margin-right: 20px;

    .el-input {
      width: 100px;
    }
  }

  .el-select:nth-child(2) {
    margin-right: 20px;

    .el-input {
      width: 150px;
    }
  }

  .el-date-editor {
    height: 30px;
    margin-right: 10px;

    > i {
      height: auto;
    }

    > span {
      height: auto;
    }
  }

  > .el-input {
    width: 150px;
    margin-right: 10px;

    input {
      width: 100%;
      height: 30px;
    }
  }
}
</style>